<template>
  <view class="video-action">
    <view class="video-length">{{ videoLength }}</view>
    <view class="share-action">
      <i
        class="iconfont icon-share"
        :style="{ fontSize: `${iconSize}px`, color: '#fff' }"
      ></i>
      <text class="action-text">分享</text>
    </view>
    <view class="comment-action">
      <i
        class="iconfont icon-comment"
        :style="{ fontSize: `${iconSize}px`, color: '#fff' }"
      ></i>

      <text class="action-text">评论</text>
    </view>
    <view class="like-action" @click="handleLike">
      <i
        class="iconfont icon-like"
        :style="{ fontSize: `${iconSize}px`, color: likeColor }"
      ></i>
      <text class="action-text"> 赞 </text>
    </view>
  </view>
</template>

<script>
  import ShareIcon from "../common/icon/ShareIcon.vue";
  import CommentIcon from "../common/icon/CommentIcon.vue";
  import LikeIcon from "../common/icon/LikeIcon.vue";
  export default {
    name: "video-action",
    components: {
      ShareIcon,
      CommentIcon,
      LikeIcon,
    },
    props: {
      videoLength: {
        type: String,
        default: "00:00",
      },
    },
    data() {
      return {
        iconSize: 13,
        likeColor: "#f8f8f8",
      };
    },
    methods: {
      handleLike() {
        this.likeColor = this.likeColor === "#f8f8f8" ? "#ff0000" : "#f8f8f8";
      },
    },
  };
</script>

<style scoped>
  .video-action {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    gap: 5px;
    margin-bottom: 6px;
  }
  .video-length {
    display: flex;
    justify-self: flex-start;
    flex: 1;
  }
  .share-action,
  .comment-action,
  .like-action {
    padding-right: 10px;
    display: flex;
  }
  .iconfont {
    padding-top: 4px;
  }
  .action-text {
    margin-left: 5px;
  }
</style>
